<template>
  <div>
    <!-- 小菜单 -->
    <div class="sub-menu">
      <sub-menu  @listenSort="changeSort" />
    </div>
    <!-- 博客列表 -->
    <div class="type-blog">
      <type-blog ref="typeblog" :type-id="typeId" />
    </div>
    <!-- 分页组件 -->
  </div>
</template>

<script>
import subMenu from "./sub-menu.vue";
import typeBlog from "./type-blog.vue";

export default {
  components: {
    subMenu,
    typeBlog,
  },
  data() {
    return {
      // 当前博客 id
      typeId: null,
    };
  },
  watch: {
    "$route.params.id": {
      immediate: true,
      handler: function (newVal) {
        this.typeId = newVal;
      },
    },
  },
  methods: {
    // 小菜单选中触发
    changeSort(sort) {
      this.$refs.typeblog.setSort(sort); // this.$refs是获取你当前页面所有子组件注册信息的集合
    },
  },
};
</script>

<style>
</style>